<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>教师表</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style>
        /* 去除表格内的线 */
        .table>tbody>tr>td {
            border: 0px;
        }
        /* 居中表头 */
        .bootstrap-table .table thead>tr>th {
            text-align: center;
        }
        /* 表头颜色 */
        .table thead {
            background: #eee;
        }
    </style>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
</head>
<body>
<!-- 整个显示界面 -->
<div class="container-fluid" style="text-align: center;">
    <!-- 切换按钮 -->
    <br>
    <div style="text-align: left">
        页面切换：
        <button type="button" class="btn btn-primary" onclick="window.location.href = '/student/slist'">学生表</button>
        <button type="button" class="btn btn-primary" onclick="window.location.href = '/course/clist'">课程表</button>
        <button type="button" class="btn btn-primary" onclick="window.location.href = 'http://localhost:8080/login/user'">登录页面</button>
    </div>
    <!-- 标题 -->
    <hr style="margin-bottom: -3px">
    <h1 style="font-family: KaiTi">教<nobr>&nbsp&nbsp</nobr>师<nobr>&nbsp&nbsp</nobr>表</h1>
    <hr style="margin-bottom: -3px">
    <!-- 按钮 -->
    <table style="margin: 20px auto; width: 100%">
        <tr style="margin-bottom: 10px">
            <td width="90px">
                <!-- 查询选项 -->
                <select class="form-control" id="option" name="option">
                    <option value="tname">姓名</option>
                    <option value="tno">教师号</option>
                </select>
            </td>
            <td style="text-align:left;">
                <!-- 查询按钮 -->
                <form class="form-inline">
                    <div class="form-group">
                        <label for="searchName"></label>
                        <input type="text" class="form-control" id="searchName" name="searchName" placeholder="请输入查询内容">
                    </div>
                    <button type="button" class="btn btn-primary" onclick="searchTeacherName();">查询</button>
                </form>
            </td>
            <td style="text-align:right;">
                <!-- 新增按钮 -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">新增教师</button>
            </td>
        </tr>
    </table>
    <!-- 教师表 -->
    <table id="teaTable" class="table table-striped" style="margin: 0 auto; padding: 20px;"></table>
</div>
<!-- 弹窗 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">教师信息</h4>
            </div>
            <div class="modal-body">
                <form id="formTeacher">

                    <input hidden="hidden" id="tid" name="tid"/>
                    <div class="form-group">
                        <label for="tname">姓名</label>
                        <input type="text" class="form-control" id="tname" name="tname" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="tno">教师号</label>
                        <input type="text" class="form-control" id="tno" name="tno" placeholder="教师号">
                    </div>
                    <div class="form-group">
                        <label for="tsex">性别</label>
                        <select class="form-control" id="tsex" name="tsex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="tage">年龄</label>
                        <input type="text" class="form-control" id="tage" name="tage" placeholder="年龄">
                    </div>
                    <div class="form-group">
                        <label for="cname">教授课名</label>
                        <input type="text" class="form-control" id="cname" name="cname" placeholder="教授课名">
                    </div>
                    <div class="form-group">
                        <label for="position">职称</label>
                        <input type="text" class="form-control" id="position" name="position" placeholder="职称">
                    </div>
                    <div class="form-group">
                        <label for="tpassword">密码</label>
                        <input type="password" class="form-control" id="tpassword" name="tpassword" placeholder="密码">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveTeacher();">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/pagejs/teacherlist.js"></script>

</body>
</html>